<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定指令</title>
    <!--1、导入vue.js，在window全局中就有了vue的构造函数（就和导入jQuery，window全局就有$可以使用一样）-->
    <script src="../js/vue_2.7.8.js"></script>
</head>
<body>
<!--2、写希望让vue控制的html区域-->
<div id="app">
    <p style="color: red;">绑定事件v-on使用</p>
    <p>count 的值是 {{count}}</p>
    <!--注意这里用的是事件名称，比如click；而不是onclick-->
    <button v-on:click="addCount(1,$event)">+1</button>
    <button v-on:click="subCount">-1</button>
    <!--v-on简写为@-->
    <p style="color: red;">绑定事件v-on的简写@使用方法</p>
    <button @click="addCount(2,$event)">+2</button>
    <!--修饰符使用-->
    <br>
    <br>
    <p style="color: red;">事件修饰符的使用</p>
    <a href="http://baidu.com" @click="toBaidu">跳转到百度</a>
    <!--阻止事件默认行为还有vue的写法-->
    <a href="http://baidu.com" @click.prevent="toBaidu2">跳转到百度</a>
    <br>
    <br>
    <p style="color: red;">按键修饰符的使用</p>
    <input @keyup.esc="clearInput" type="text" @keyup.enter="commitInput">
</div>
</body>
</html>
<script>
    //3.创建vue对象，并渲染dom
    const vm = new Vue({
        //vue的固定写法，表示vue要控制的哪个dom；接收的是个选择器
        el: "#app",
        //data是要渲染的数据
        data: {
            count: 0
        },
        //定义函数
        methods: {
            //如果传参就会不传事件对象，VUE提供了内置事件变量，是$event(必须叫这个)
            addCount: function (x,e) {
                vm.count += x;
                //事件e会吧触发事件的dom元素放到target中
                if (this.count % 2 === 0) {
                    e.target.style.backgroundColor = '';
                } else {
                    e.target.style.backgroundColor = 'green';
                }
            },
            //是上面形式的简写(如果事件没有传参，默认会传一个事件函数)
            subCount(e) {
                //this等于vm
                this.count -= 1;
                //事件e会吧触发事件的dom元素放到target中
                if (this.count % 2 === 0) {
                    e.target.style.backgroundColor = '';
                } else {
                    e.target.style.backgroundColor = 'red';
                }
            },
            toBaidu(e){
                //阻止默认行为，这样就能看到console打印的值了
                e.preventDefault();
                console.log("调转到百度了")
            },
            toBaidu2(){
                console.log("调转到百度了2")
            },
            clearInput(e){
                e.target.value='';
            },
            commitInput(){
                alert('commit success');
            }
        }
    });
</script>
